<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User Data</title>
    <style>
        table {
            width: 80%;
            border-collapse: collapse;
            margin: 20px auto;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }
        th {
            background-color: #f4f4f4;
        }
    </style>
</head>
<body>
<table>
    <thead>
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
    </tr>
    </thead>
    <tbody id="user-data"></tbody>
</table>
<script>
    function getData() {
        $.ajax({
            url: 'http://211.71.149.251:1104/user/user/index',
            method: 'POST',
            dataType: 'json',
            success: function (data) {
                let rows = '';
                data.forEach(user => {
                    rows += `<tr>
                            <td>${user.id}</td>
                            <td>${user.name}</td>
                            <td>${user.age}</td>
                        </tr>`;
                });
                $('#user-data').html(rows);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.log('请求失败，状态码: ', jqXHR.status);
                console.log('错误信息: ', errorThrown);
                alert('Failed to fetch data.');
            }
            
        });
    }
    $(document).ready(getData);
</script>
</body>
</html>
